<template>
	<view class="class">
		<u-navbar :border-bottom="false" title="班级" ></u-navbar>
		<!-- <u-tabs :list="tabList" :is-scroll="false" :current="tabCurrent" @change="e=>tabCurrent=e" font-size="28" bar-width="32" bar-height="8" active-color="#1661FF" :bar-style="{borderRadius:'8rpx',background:'linear-gradient(90deg,#1661ff 0%, rgba(22,97,255,0.00) 100%);'}"></u-tabs> -->
		<view class="list acea-row row-column" v-if="calssData.length != 0">
			<view class="item acea-row row-middle row-between" v-for="(item,index) in calssData" :key="index">
				<view class="left acea-row row-column">
					<text>{{item.name}}</text>
					<text>学员数：{{item.stu_count}}/{{item.rongliang}}</text>
				</view>
				<view class="btn" @click="common.go('/pages/pack/class/classDetail?id='+item.id)">查看</view>
			</view>
			<u-loadmore :status="status" style="margin-top: 32rpx;display: block;" />
		</view>
		<u-empty text="暂无班级" mode="list" v-else></u-empty>
		<view class="commonFooter"></view>
	</view>
</template>

<script>
	import common from '../../api/common.js'
	import request from '../../api/request.js'
	export default {
		data(){
			return{
				common,
				status:'loadmore',
				page: 1,
				limit:10,
				tabList:[{
					name: '班级信息'
				}, {
					name: '一对一'
				}],
				calssData:[],
				tabCurrent:0
			}
		},
		created() {
			this.getClassData()
		},
		methods:{
			init(){
				this.page = 1
				this.calssData = []
				this.getClassData()
			},
			getClassData(){
				let data = {
					page:this.page,
					limit:this.limit,
				}
				this.status = 'loading'
				request.go((e)=>{
					this.status = 'loadmore';
					if(e.data.list.length == 0){
						this.status = 'nomore'
					}else{
						this.calssData = this.calssData.concat(e.data.list)
					}
				},'/Banji/index',data,'POST')
			}
		},
		onReachBottom() {
			if(this.status == "loadmore"){
				this.page = ++ this.page;
				this.getClassData()
			}
		}
	}
</script>

<style scoped>
	.class{
		min-height: 100vh;
		background-color: #f7f8fa;
	}
	.class .list{
		min-height: 100vh;
		overflow: hidden;
	}
	.class .list .item{
		width: 686rpx;
		padding: 32rpx;
		background-color: #FFFFFF;
		border-radius: 24rpx;
		margin: 32rpx auto 0;
		box-sizing: border-box;
	}
	.class .list .item .left text:nth-child(1){
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 700;
		color: #1f2329;
		line-height: 44rpx;
		margin-bottom: 16rpx;
		display: block;
	}
	.class .list .item .left text:nth-child(2){
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #8f959e;
		line-height: 32rpx;
	}
	.class .list .item .btn{
		width: 116rpx;
		height: 52rpx;
		background: #1661ff;
		border-radius: 8rpx;
		line-height: 52rpx;
		text-align: center;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #ffffff;
	}
</style>
